<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
			
    #box1{
      margin: 20px;
      width: 100px;
      height: 100px;
      background-color: red;
    }
    
  </style>
  <script type="text/javascript">
  window.onload = function () {
    	//获取id为box1的div
      var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
         box1.onmousewheel = function(event) {
           event = event || window.event
           					
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);
					
					
					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
           if (event.wheelDelta>0 || event.detail<0) {
             //向上滚，box1变短
             box1.style.height = box1.clientHeight - 10 + 'px'
           } else {
             console.log(event.wheelDelta)
             box1.style.height = box1.clientHeight + 10 + 'px'
             console.log(box1.style.height)
           }
          //  console.log(box1.style.height)


          /*
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
					 * 需要使用event来取消默认行为event.preventDefault();
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错
					 */
           event.preventDefault && event.preventDefault()

           /*
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					return false;
					
         }
  }
  </script>
</head>
<body style="height: 2000px;">
		
  <div id="box1"></div>
  
</body>
</html>